<template>
  <div class="status-box text-center">
    <div v-if="statusData.status === 'success'" class="success-box">
      <i class="icon icon-success"></i>
      <h3>恭喜您，{{statusData.msg || '操作'}}成功！</h3>
      <p>工作人员会在24小时内联系您，请您保持电话畅通。</p>
    </div>
    <div v-else-if="statusData.status === 'confirmPay'">
      <i class="icon icon-confirm"></i>
      <h3>请确认是否支付</h3>
      <p>如支付失败，请查看订单，进行支付</p>
      <p>如支付成功，工作人员会在24小时内联系您，请您保持电话畅通。</p>
    </div>
    <div v-else class="error-box">
      <i class="icon icon-fail"></i>
      <h3>{{statusData.msg || '操作'}}失败！</h3>
    </div>
    <div class="btn-box text-center m-auto">
      <navigator :url="orderListUrl" open-type="reLaunch" class="btn-full radius" >查看订单</navigator>
      <navigator url="/pages/home/main" open-type="reLaunch" class="btn-light radius" >返回首页</navigator>
    </div>
  </div>
</template>
<script>

export default {
  data () {
    return {
      statusData: {},
    }
  },
  computed: {
    orderListUrl () {
      let url = '/pages/order/main';
      if(this.statusData.orderStatus){
        url = `${url}?orderStatus=${this.statusData.orderStatus}`
      }
      return url
    }
  },
  methods: {

  },
  mounted () {
    this.statusData = this.$root.$mp.query
  }
}
</script>

<style lang="less">
.status-box {
  padding-top: 126upx;
}
.status-box .icon {
  width: 142upx;
  height: 142upx;
  margin-bottom: 74upx;
}
.status-box h3 {
  font-size: 36upx;
  font-weight: 700;
  line-height: 1em;
  padding-bottom: 30upx;
}
.btn-box {
  padding-top: 140upx;
  width: 400upx;
}
.btn-box .btn-full {
  margin-bottom: 30upx;
}

</style>
